<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove" @collect="toCollect"></navbar>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll">
				<!-- 轮播 -->
				<productBg :images="listData.thumbnail?listData.thumbnail.split(','):[]" @initImg="initImg"
					:code="listData.id" :updateTime="listData.updateTime"></productBg>

				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title line2">
							<!-- <view class="red-tag">好铺优选</view> -->
							<view class="title-text line2">{{ listData.name }} <!-- <text
									class="project-type">{{ listData.type }}</text> --></view>
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<button open-type="share">
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">微信</view>

							</button>
							<button @click="toReport">
								<image src="../static/images/report_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">举报</view>
							</button>
						</view>
					</view>
					<!-- 浏览、咨询统计 -->
					<view class="acea-row row-middle row-between visit-box border-b">
						<view class="visit-advtar" @click="toVisitor">
							<image :src="m.avatar" mode=""
								v-for="(m,ind) in listData.managementResponse?listData.managementResponse:[]" :key="ind"
								:style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num" @click="toVisitor">{{listData.view?listData.view:0}}人浏览</view>
							<view class="visit-num">
								{{listData.communication && listData.communication!= 0 ?listData.communication: communicationRandom}}人咨询
							</view>
							<!-- <view class="visit-num" @click="toMatchPage" style="color: red;">信息匹配({{matchTotal}})</view> -->
						</view>
						<!-- 					<view style="margin-top: 28rpx;">
							<u-alert v-if="matchTotal > 0" :title="'已为这条信息找到 '+matchTotal+' 个感兴趣的人，点击查看详情！'"
								@click="toMatchPage" type="error"></u-alert>
						</view> -->
					</view>
					<!-- 价格 户型 -->
					<view class="acea-row row-middle row-between shop-area">
						<view class="">
							<view class="red-bold-txt">{{ listData.residentialPrice || 0}}<text
									class="red-bold-txt-s">元/m²</text></view>
							<view class="gray-txt">住宅均价</view>
						</view>
						<view class="">
							<view class="red-bold-txt">{{ listData.commercialPrice || 0}}<text
									class="red-bold-txt-s">m²</text></view>
							<view class="gray-txt">商业均价</view>
						</view>
						<view class="">
							<view class="black-bold-txt">{{ listData.householdType || '无'}}</view>
							<view class="gray-txt">户型</view>
						</view>
					</view>
					<!-- 详情 -->
					<view class="project-status white-bg mb-24">
						<view class="acea-row row-middle row-between pd-t-b-24">
							<view class="acea-row row-middle w-48">
								<view class="label">项目状态</view>
								<view class="text">{{ listData.status == '1' ? '开发中' : '已竣工'}}</view>
							</view>
							<view class="acea-row row-middle w-48">
								<view class="label">规划套数</view>
								<view class="text">{{ listData.residentialUnits || 0 }}套</view>
							</view>
						</view>
						<view class="acea-row row-middle pd-t-b-24">
							<view class="label">开发商名称</view>
							<view class="text"> {{ listData.developerName || 0 }}</view>
						</view>
						<view class="acea-row row-middle row-between pd-t-b-24">
							<view class="acea-row row-middle w-48">
								<view class="label">总建筑面积</view>
								<view class="text">{{ listData.floorage || 0 }}㎡</view>
							</view>
							<view class="acea-row row-middle w-48">
								<view class="label">总楼层数</view>
								<view class="text">{{ listData.totalFloors || 0}}层</view>
							</view>
						</view>
						<view class="acea-row row-middle pd-t-b-24">
							<view class="label">开工/交付时间</view>
							<view class="text">{{ listData.commencementDate || '' }}</view>
						</view>
						<view class="acea-row row-middle row-between pd-t-b-24">
							<view class="acea-row row-middle w-48">
								<view class="label">停车场</view>
								<view class="text">{{ listData.parkingSpace || 0}}位</view>
							</view>
							<view class="acea-row row-middle w-48">
								<view class="label">物管费用</view>
								<view class="text">{{ listData.propertyCost || 0}}元</view>
							</view>
						</view>
					</view>
					<!-- 地址 -->
					<view class="acea-row row-top row-between address">
						<view class="address-l line2">{{ listData.address || '' }}</view>
						<view class="acea-row row-middle distance" @click="toLocation">
							<image src="../static/images/red_location.png" mode=""></image>
							<view>{{kmUnit(listData.distance)}}</view>
						</view>
					</view>
				</view>

				<!-- 悬赏任务 -->
				<!-- <view class="task-box white-bg mb-24">
					<view class="acea-row row-middle row-between task-title mb-24">
						<view class="title-l line2">本信息已参与赏金任务，快来一起分享领赏金吧!</view>
						<view class="jiantou">
							<image src="../static/images/cir_right.png" mode=""></image>
						</view>
					</view>
					<view class="task-list">
						<view class="task-item mb-24">
							<view class="acea-row row-top row-between item-top">
								<view class="task-tit line2">出租 | {{ listData.address }}| 2000㎡ | 20000元/㎡</view>
								<view class="task-tit-l">
									<view class="task-top-btn">领任务</view>
									<view>（已133人领）</view>
								</view>
							</view>
							<view class="acea-row row-bottom row-between item-bottom">
								<view class="share-list">
									<view class="share-item">
										分享赚1: <text>现金1000元</text> （已托管平台）
									</view>
									<view class="share-item">
										分享赚2: <text>价值1888元(金币)</text>,剩余184(金币)
									</view>
								</view>
								<view class="item-bottom-btn">任务详情</view>
							</view>
						</view>
					</view>
				</view> -->

				<!-- 项目介绍 -->
				<view class="module-box white-bg mb-24">
					<view class="module-title"> 项目介绍</view>
					<view class="introduce pd-t-b-24">
						{{ listData.introduction || ''}}
					</view>
				</view>

				<!-- 附件下载 -->
				<view class="fjcontainer module-box white-bg mb-24">
					<view class="module-title">附件</view>
					<view class="">
						<text style="font-size: 20rpx;color: red;">(查看附件需要复制文件连接到浏览器打开)</text>
					</view>
					<view v-for="(file, index) in uploadFilesData" :key="index" class="file-item">
					      <view class="file-name">{{ file.fileName }}</view>
					      <button class="download-button" @click="downloadFile(index)">复制地址</button>
					<!--      <view v-if="file.progress >= 0" class="progress">
					        下载进度：{{ file.progress }}%
					      </view> -->
					    </view>
				</view>
				<!-- 联系人 -->
				<view class="module-box white-bg mb-24">
					<contacts-list :list="listData.contacts"></contacts-list>
				</view>



				<!-- 项目文件 -->
				<!-- 			<view class="module-box white-bg">
					<view class="module-title">
						项目文件
					</view>
					<view class="files-list">
						<view class="acea-row row-middle file">
							<image class="file-icon" src="../static/images/files_02.png" mode=""></image>
							<view class="name line1">文件名是六个字....pdf</view>
							<view class="down-icon">
								<image src="../static/images/red_down.png"></image>
							</view>
						</view>
						<view class="acea-row row-middle file">
							<image class="file-icon" src="../static/images/files_01.png" mode=""></image>
							<view class="name line1">文件名是六个字....word</view>
							<view class="down-icon">
								<image src="../static/images/gray_down.png"></image>
							</view>
						</view>
						<view class="acea-row row-middle file">
							<image class="file-icon" src="../static/images/files_01.png" mode=""></image>
							<view class="name line1">文件名是六个字....word</view>
							<view class="down-icon">
								<image src="../static/images/red_down.png"></image>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 商铺 房屋情况 -->
				<!-- 				<view class="module-box white-bg">
					<view class="acea-row row-middle row-between house-status pd-t-b-24">
						<view class="acea-row row-column-around house">
							<view class="house-name">商铺</view>
							<view class="acea-row row-middle row-center rent-status">
								<view class="rent">
									出租 <text>3</text>
								</view>
								<view class="line">|</view>
								<view class="sell">
									出售 <text>20</text>
								</view>
							</view>
						</view>
						<view class="acea-row row-column-around house">
							<view class="house-name">房屋</view>
							<view class="acea-row row-middle row-center rent-status">
								<view class="rent">
									出租 <text>3</text>
								</view>
								<view class="line">|</view>
								<view class="sell">
									出售 <text>20</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<u-collapse @change="collapseChange" @open="collapseOpen">
					<u-collapse-item title="周边分析" name="zb">
						<view class="module-box analysis white-bg">
							<view class="acea-row row-middle row-between pd-t-b-24">
								<view class="module-title">周边分析</view>
								<view class="title-r-gray">
									采集1公里内数据
								</view>
							</view>
							<!-- 图表 -->
							<view class="echarts-box">
								<qiun-data-charts type="radar" :chartData="radarChartData" :opts="radarChartOpts" />
							</view>
							<!-- 周边人群信息 -->
							<view class="analysis-data">
								<view class="acea-row row-middle pd-t-b-24">
									<view class="analysis-data-l">
										常住人口生意
									</view>
									<view class="acea-row row-between analysis-data-box" @click="toZbList('小区')">
										<view class="acea-row row-middle">
											<image src="../static/images/rim_01.png"></image>
											<view>小区</view>
										</view>
										<view>{{zbData['小区'] || 0}}个</view>
									</view>
									<view class="acea-row row-between analysis-data-box" @click="toZbList('学校')">
										<view class="acea-row row-middle">
											<image src="../static/images/rim_02.png"></image>
											<view>学校</view>
										</view>
										<view>{{zbData['学校'] || 0}}个</view>
									</view>
								</view>
								<view class="acea-row row-middle pd-t-b-24">
									<view class="analysis-data-l">
										流动人口生意
									</view>
									<view class="acea-row row-between analysis-data-box" @click="toZbList('地铁站')">
										<view class="acea-row row-middle">
											<image src="../static/images/rim_03.png"></image>
											<view>地铁站</view>
										</view>
										<view>{{zbData['地铁站'] || 0}}个</view>
									</view>
									<view class="acea-row row-between analysis-data-box" @click="toZbList('公交站')">
										<view class="acea-row row-middle">
											<image src="../static/images/rim_04.png"></image>
											<view>公交站</view>
										</view>
										<view>{{zbData['公交站'] || 0}}个</view>
									</view>
								</view>
								<view class="acea-row row-middle pd-t-b-24">
									<view class="analysis-data-l">
										商务人口生意
									</view>
									<view class="acea-row row-between analysis-data-box" @click="toZbList('写字楼')">
										<view class="acea-row row-middle">
											<image src="../static/images/rim_05.png"></image>
											<view>写字楼</view>
										</view>
										<view>{{zbData['写字楼'] || 0}}个</view>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
					<u-collapse-item title="消费能力" name="jz">
						<!-- 消费能力 -->
						<view class="module-box white-bg mb-24">
							<view class="module-title pd-t-b-24">
								消费能力
							</view>
							<view class="pd-t-b-24 border-b contrast">
								<view class="contrast-title">
									参考一：房价对比
								</view>
								<view class="acea-row row-middle row-between pd-t-b-24">
									<view class="label-c">周边均价</view>
									<view class="progress-bg">
										<view class="progress-line-r"
											:style="{width:housingPrice.ratePrice?(parseInt(housingPrice.ratePrice)/200)+'%' : 0 +'%'}">
										</view>
									</view>
									<view class="label-c">
										{{ housingPrice.ratePrice?parseInt(housingPrice.ratePrice)  : 0}}<text>元/m²</text>
									</view>
								</view>
								<view class="acea-row row-middle row-between pd-t-b-24">
									<view class="label-c">城市均价</view>
									<view class="progress-bg">
										<view class="progress-line-y"
											:style="{width:housingPrice.cityRatePrice?(parseInt(housingPrice.cityRatePrice)/200)+'%' : 0 +'%'}">
										</view>
									</view>
									<view class="label-c">
										{{housingPrice.cityRatePrice?parseInt(housingPrice.cityRatePrice): 0}}<text>元/m²</text>
									</view>
								</view>
							</view>
						</view>

					</u-collapse-item>
				</u-collapse>



				<!-- 推荐 -->
				<view class="goods">
					<view class="acea-row row-between goods-top  pd-t-b-24">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab"
								:key="item" @click="changeRecommed(index)">{{item}}</view>
						</view>
						<!-- <view class="shop-btn">
							金币商城
						</view>	 -->
					</view>
					<!-- 商铺列表 -->
					<view class="project-recommend">
						<view class="acea-row row-middle project" @click="toDetail(item.id)" v-for="item in nearbyList"
							:key="item.id">
							<!-- 	<view class="project-tag-gray">
								住宅
							</view> -->
							<view class="img">
								<image :src="item.photoVideo?item.photoVideo.split(',')[0]:$noImageShow"
									mode="aspectFill">
								</image>
								<view class="acea-row row-middle distance">
									<image src="" mode=""></image>
									<!-- <text>距您1.4km</text> -->
								</view>
							</view>
							<view class="info">
								<view class="name line1">{{item.name}} </view>
								<view class="address line1">{{item.cityName}} | {{item.address}}</view>
								<!-- <view class="sell-now">在售 4500套</view> -->
								<view class="acea-row row-middle house">
									<view class="tag">住宅</view>
									<view class="red-price"> {{item.residentialPrice}}<text>元/㎡</text></view>
									<view class="sell-status">售125丨租130</view>
								</view>
								<view class="acea-row row-middle shop">
									<view class="tag">商铺</view>
									<view class="gray-price"> {{item.commercialPrice}}<text>元/㎡</text></view>
									<view class="sell-status">售50丨租 30</view>
								</view>
							</view>
						</view>
						<!-- 						<view class="acea-row row-middle project">
							<view class="project-tag-gray">
								住宅
							</view>
							<view class="img">
								<image src="" mode=""></image>
								<view class="acea-row row-middle distance">
									<image src="@/static/images/location.png" mode=""></image>
									<text>距您1.4km</text>
								</view>
							</view>
							<view class="info">
								<view class="name line1">万科三万英尺 </view>
								<view class="address line1">长沙市 | 雨花区-人民东路57号</view>
								<view class="sell-now">在售 4500套</view>
								<view class="acea-row row-middle house">
									<view class="tag">住宅</view>
									<view class="red-price"> 10000<text>元/㎡</text></view>
									<view class="sell-status">售125丨租130</view>
								</view>
								<view class="acea-row row-middle shop">
									<view class="tag">商铺</view>
									<view class="gray-price"> 10000<text>元/㎡</text></view>
									<view class="sell-status">售50丨租 30</view>
								</view>
							</view>
						</view> -->
					</view>
					<view class='loadingicon acea-row row-center row-middle'>
						<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
					</view>
				</view>

				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>
		<u-popup :show="zbshow" @close="close" mode="right" :customStyle="{width :'300px',zIndex:999999999999999}"
			class="call-popup popup-show">
			<view class="acea-row row-top row-between item zblIST">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="zbLower"
					@touchmove.stop.prevent="() => {}">
					<view class="scroll-view-item uni-bg-red" v-for="(item,index) in zbList">
						<view class="item_title">{{ item.title }}</view>
						<view class="info">距离：{{item._distance?item._distance:0}}米</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<report :link-id="listData.id" :types="types" ref="report" />
		<detail-footer :contact="listData" :info="listData" @toPhone="toPhone" @toCollect="toCollect"></detail-footer>
	</view>
</template>

<script>
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '../../../config/app.js';
	import navbar from '../components/navbar/navbar.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import productBg from '../components/productBg/productBg.vue';
	import report from "@/pages/details/components/goods_report/report.vue"
	import {
		getZb,
		HomePagePeripheral,
		getProject
	} from '@/api/api.js'
	import {
		getProjectDetailApi
	} from '@/api/details/project.js'
	import {
		getLocation
	} from '@/filters/commFilter.js'
	import qiunDataCharts from "../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	export default {
		components: {
			navbar,
			detailFooter,
			contactsList,
			productBg,
			qiunDataCharts,
			report
		},
		data() {
			return {
				images: [],
				videos: [],
				listData: {},
				housingPrice: {
					city: {

					},
				},
				communicationRandom: (Math.floor(Math.random() * (500 - 50 + 1)) + 50),
				zbshow: false,
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				height: 0,
				opacity: 0,
				goodsTabOn: 0,
				uploadFilesData: [], //附件上传
				goodsTab: ['为你推荐', '附近推荐'],
				nearbyList: [],
				nearPage: 1,
				loading: true,
				loadTitle: '我也是有底线的',
				goodsList: [1, 2],
				radarChartData: {
					categories: [],
					series: []
				},
				zbList: [],
				columnChartData: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				radarChartOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					title: {
						offsetY: '50',
						offsetX: '50',
						name: '本铺'
					},
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "circle",
							gridColor: "#CCCCCC",
							gridCount: 5,
							opacity: 0.2,
							max: 50,
							labelShow: true,
							radius: 90,
							labelColor: '#e6251d'
						}
					},
					id: 0,
					types: '',

				},
				consumption: {},
				zbData: {},
				zbDatas: {},
				openKey: '',
				zbPage: 1,
				types: 9,
				bhv: [],
				conllapseValue: [],
			};
		},
		onLoad(options) {
			let that = this;
			if (!options.id) return
			this.id = options.id
			that.getList(options.id);
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});

			// this.getZhouBian();
			// this.getHomePagePeripheral();
		},
		methods: {
			collapseChange(val) {
				this.conllapseValue == val;
				console.log("this.conllapseValue", val)
				setTimeout(() => {
					val.forEach(item => {
						if (item.name == 'zb') {
							this.zgShowaa = item.status == 'open' ? true : false
						} else {
							this.zbShowaa = (item.status == 'open' ? true : false)
							console.log('这是啥', item.status == "open" ? true : false, this.zbShowaa, item
								.status)
						}
					})
				}, 300)

			},
			collapseOpen(val) {
				if (!this.isJingzheng && val == 'jz') {
					this.getHomePagePeripheral();
				}
				if (!this.isZhoubian && val == 'zb') {
					this.getZhouBian();

				}

			},
			downloadFile(index) {
				let that = this;
				const file = this.uploadFilesData[index];
				that.saveFileToLocal('https://www.shanghepu.com/'+file.projectFile)
				// const downloadTask = uni.downloadFile({
				// 	url: "https://www.shanghepu.com/"+file.projectFile,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			console.log('下载完成：', res.tempFilePath);
				// 			that.saveFileToLocal(res.tempFilePath)
				// 			// uni.saveFile({
				// 			// 	tempFilePath: res.tempFilePath,
				// 			// 	success: function(saveRes) {
				// 			// 		console.log('文件保存成功：', saveRes.savedFilePath);
				// 			// 	}
				// 			// });
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.error('下载失败：', err);
				// 	}
				// });

				// downloadTask.onProgressUpdate((res) => {
				// 	console.log('下载进度：', res.progress);
				// 	this.$set(this.uploadFilesData, index, {
				// 		...file,
				// 		progress: res.progress
				// 	});
				// });
			},
			saveFileToLocal(text) {
			    // 假设你想复制的内容是
			    
			    wx.setClipboardData({
			        data: text,
			        success: function() {
			            wx.showToast({
			                title: '复制成功',
			                icon: 'success',
			                duration: 1000
			            });
			        },
			        fail: function() {
			            wx.showToast({
			                title: '复制失败',
			                icon: 'none',
			                duration: 1000
			            });
			        }
			    });

			},

			getHomePagePeripheral() {
				HomePagePeripheral({
					longitude: this.listData.longitude,
					latitude: this.listData.latitude,
					city: this.$city
				}).then(res => {
					console.log('res', res)
					if (res.code == 200) {
						res.data.forEach(item => {
							// housingPrice  consumption
							if (item.skey == 'ratePrice' || item.skey == 'cityRatePrice') {
								this.housingPrice[item.skey] = item.val
							} else if (item.skey == 'capItaPrice' || item.skey == 'cityItaPrice') {
								this.consumption[item.skey] = item.val
								// this.consumption = {[item.skey] : item.val}
							} else {
								this.columnChartData.categories.push(item.skey)
								this.columnChartData.series[0].data.push(item.val)
							}
						})
					}
				})
			},
			initImg() {

			},
			runList(ind) {
				console.log(this.indexData)
				let m = this.indexData.menus.map(item => {
					let type = -1;
					switch (item.name) {
						case '商铺':
							type = 883;
							break;
						case '写字楼':
							type = 884;
							break;
						case '仓库':
							type = 885;
							break;
						case '厂房':
							type = 911;
							break;
						case '土地':
							type = 912;
							break;
						case '房屋':
							type = 913;
							break;
						case '公寓':
							type = 1014;
							break;
						default:
							type = -1;
					}

					return {
						name: item.name,
						type
					}
				});
				let s = [{
					name: '出租',
					status: 0
				}, {
					name: '转让',
					status: 2
				}, {
					name: '出售',
					status: 1
				}, {
					name: '求租',
					status: 3
				}, {
					name: '求购',
					status: 4
				}]
				let url = '/pages/others/shopAreaList/shopAreaList?index=0&type=' + s[ind].status + '&m=' + JSON.stringify(
					m);
				uni.navigateTo({
					url
				})
			},
			kmUnit(m) {
				m = Number(m)
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m.toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			toVisitor() {
				let that = this;
				let d = {
					id:  that.listData.id,
					title: that.listData.name,
					view: that.listData.view,
					vistype: 9
				}
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(d)
				})
			},
			toPhone() {
				if (this.bhv.length < 1 || this.bhv.indexOf(2) == -1) {
					this.bhv.push(2)
				}
				//console.log(this.bhv)
			},
			catImg() {
				if (this.bhv.length < 1 || this.bhv.indexOf(4) == -1) {
					this.bhv.push(4)
				}
			},
			toCollect() {
				if (this.bhv.length < 1 || this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			toLocation() {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.listData.latitude),
					longitude: parseFloat(that.listData.longitude),
					success: function() {
						console.log('success');
						if (that.bhv.length < 1 || that.bhv.indexOf(1) == -1) {
							that.bhv.push(1)
						}
					}
				});
			},
			toZbList(key) {
				this.openKey = key;
				this.zbList = this.zbDatas[key]
				console.log(this.zbList)
				this.zbshow = true;
			},
			close() {
				this.oepnKey = "";
				this.zbPage = 1;
				this.zbList = [];
				this.zbshow = false;
			},
			zbLower(e) {
				if (this.openKey) {
					this.zbPage++
					this.getZhouBian(this.openKey, this.zbPage)
				}

			},
			toReport() {
				this.$refs.report.open();
			},
			getZhouBian(key, page) {
				let params = {
					...this.$location
				}
				if (key) {
					params.keywords = key;
					params.page = page;
				}
				getZb(params).then(res => {
					if (res.code == 200) {
						let obj = {
							name: "数量",
							data: []
						}
						res.data.forEach(item => {
							if (key && item.key == key) {
								console.log('zbList', this.zbList)
								this.zbList = [...this.zbList, ...item.data]
							} else {
								this.radarChartData.categories.push(item.key);
								obj.data.push(item.num)
								console.log("item-----------", item)
								this.zbData[item.key] = item.num
								this.zbDatas[item.key] = item.data
								// this.zbDatas[item.key] = item.data
							}
						})
						console.log('this.zbData', this.zbData)
						this.radarChartData.series.push(obj)
						console.log("this.radarChartData", this.radarChartData)
						// this.zbData = res.data
					}
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/details/project/project?id=' + id
				})
			},
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop < 10 ? 0 : e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			//切换推荐栏
			changeRecommed(index) {
				this.goodsTabOn = index;
				this.loading = false;
				this.nearPage = 1;
				this.nearbyList = []
				// if (this.goodsTabOn != 1) return
				this.getNearbyList(index)
			},
			async getList(id) {
				this.image = [];
				this.videos = [];

				try {
					let res = await getProjectDetailApi(id, this.$location);
					res.data.projectId = res.data.id;
					this.listData = res.data;
					console.log('listDataParoject', this.listData)
					let photoVideo = this.listData.photoVideo ? this.listData.photoVideo.split(',') : [];
					this.existsIsLove(this.listData.id);
					photoVideo.forEach(item => {
						const len = item.length;
						const type = item.substring(len - 3, len);
						['jpg', 'png'].includes(type) ? this.images.push(item) : this.videos.push(item);
					})
					this.images = this.listData.thumbnail ? this.listData.thumbnail.split(',') : []

					if (this.listData.projectFile) {
						let pf = this.listData.projectFile.split(',');
						let pn = this.listData.fileName.split(',');
						pf.forEach((p, index) => {
							this.uploadFilesData.push({
								projectFile: p,
								fileName: pn[index]
							})
						})
					}
					console.log(this.uploadFilesData)
					this.existsIsLove(this.listData.id);
					this.getNearbyList();
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				} finally {
					// let location = await getLocation();
					// console.log(location)
				}
			},
			async getNearbyList(index) {
				console.log('fujin....')

				let parmas = {
					limit: 4,
					page: this.nearPage,
					city: this.$city
				}
				if (index == 1) {
					parmas = {
						...parmas,
						...this.$location
					}
				}
				try {
					let {
						data
					} = await getProject(parmas);
					let d = [...this.nearbyList, ...data.list];
					this.nearbyList = d.filter(item => item.id != this.curId && item.id != this.id)
					console.log('jigweidu=', data)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					//TODO handle the exception
				}
			},
			toCollect(status) {
				// this.isLove = status;
				// console.log('status',status)
				console.log(this.listData)
				let that = this;
				let d = {
					status,
					type: 9,
					id: that.listData.id
				}
				if (status) {
					d.title = that.listData.name
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})


			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 9
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			}
		},
		onReachBottom() {
			this.nearPage++;
			this.getNearbyList(this.goodsTabOn)
		}
	}
</script>

<style lang="scss" scoped>
	@import "../static/css/index.scss";

	/deep/ .u-cell__body {
		height: 105rpx;
		/* 设置你想要的高度 */
		line-height: 100rpx;
		/* 调整行高以垂直居中文字 */
		background-color: #fff;
	}

	.scroll-Y {
		padding-top: 120rpx;
		height: calc(100vh - 190rpx);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		line-height: 40rpx;
		text-align: left;
		padding: 10rpx 30rpx;
		font-size: 30rpx;
	}

	.zblIST .info {
		font-size: 22rpx;
		color: #ccc;
	}

	.files-list {
		.file {
			padding: 24rpx 0;
			position: relative;
			border-bottom: 1px solid rgba(238, 238, 238, 1);

			.name {
				width: 50%;
				margin-left: 24rpx;
				font-size: 28rpx;
				letter-spacing: 0px;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.down-icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				margin-top: -18rpx;
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.file-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.house-status {
		.house {
			width: 43%;
			height: 140rpx;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
		}

		.house-name {
			margin: 0 auto;
			display: inline-block;
			padding-right: 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			position: relative;

			&::after {
				content: '';
				display: block;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -5rpx;
				width: 10rpx;
				height: 10rpx;
				border-top: 1px solid rgba(238, 33, 45, 1);
				border-right: 1px solid rgba(238, 33, 45, 1);
				transform: rotate(45deg);
			}
		}

		.rent-status {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				padding: 0 12rpx;
			}

			.rent {
				text-align: right;
			}

			.sell {
				text-align: left;
			}

			.line {
				padding: 0 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
			}
		}
	}

	.project-recommend {
		padding: 30rpx 28rpx;

		.project~.project {
			margin-top: 24rpx;
		}

		.project {
			padding: 30rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			position: relative;

			.project-tag-gray {
				width: 70rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				border-radius: 4rpx;
				background: rgba(242, 242, 242, 1);
				position: absolute;
				right: 28rpx;
				top: 30rpx
			}

			.img {
				width: 216rpx;
				height: 202rpx;
				border-radius: 10rpx;
				position: relative;
				background: #e3e3e3;

				image {
					width: 216rpx;
					height: 202rpx;
				}

				.distance {
					padding: 12rpx;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 42rpx;

					image {
						width: 14rpx;
						height: 16rpx;
					}
				}
			}

			.info {
				width: calc(100% - 230rpx);
				height: 202rpx;
				margin-left: 12rpx;

				.name {
					width: 260rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.address {
					padding: 0;
					width: 100%;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(125, 125, 125, 1);
				}

				.sell-now {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(125, 125, 125, 1);
				}

				.sell-status {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(196, 196, 196, 1);
				}

				.red-price {
					min-width: 40%;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}
				}

				.gray-price {
					min-width: 40%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(125, 125, 125, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}

				}

				.house {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(238, 33, 45, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}

				.shop {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(242, 242, 242, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}
				}
			}
		}
	}


	.fjcontainer {
	
		margin: 20rpx 0;

		.file-item {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  border-bottom: 1px solid #eee; /* 明显的分割线 */
		  background-color: white; /* 白色背景 */
		  padding: 10px 0;
		}
		.file-name {
		  flex: 1; /* 文件名使用可用空间 */
		}
		.download-button {
			font-size:26rpx;
		  margin-left: 10px;
		}
		.progress {
		  width: 100%;
		  margin-top: 5px;
		  text-align: center;
		}
	}
</style>